<html>
  <head>
	  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>i5ting_ztree_toc:README</title>
		<link href="toc/style/github-bf51422f4bb36427d391e4b75a1daa083c2d840e.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/style/github2-d731afd4f624c99a4b19ad69f3083cd6d02b81d5.css" media="all" rel="stylesheet" type="text/css"/>
		<link href="toc/css/zTreeStyle/zTreeStyle.css" media="all" rel="stylesheet" type="text/css"/>
	  <style>
		pre {
		    counter-reset: line-numbering;
		    border: solid 1px #d9d9d9;
		    border-radius: 0;
		    background: #fff;
		    padding: 0;
		    line-height: 23px;
		    margin-bottom: 30px;
		    white-space: pre;
		    overflow-x: auto;
		    word-break: inherit;
		    word-wrap: inherit;
		}

		pre a::before {
		  content: counter(line-numbering);
		  counter-increment: line-numbering;
		  padding-right: 1em; /* space after numbers */
		  width: 25px;
		  text-align: right;
		  opacity: 0.7;
		  display: inline-block;
		  color: #aaa;
		  background: #eee;
		  margin-right: 16px;
		  padding: 2px 10px;
		  font-size: 13px;
		  -webkit-touch-callout: none;
		  -webkit-user-select: none;
		  -khtml-user-select: none;
		  -moz-user-select: none;
		  -ms-user-select: none;
		  user-select: none;
		}

		pre a:first-of-type::before {
		  padding-top: 10px;
		}

		pre a:last-of-type::before {
		  padding-bottom: 10px;
		}

		pre a:only-of-type::before {
		  padding: 10px;
		}

		.highlight { background-color: #ffffcc } /* RIGHT */
		</style>
  </head>
  <body>
	  <div>
				<div style='width:25%;'>
						<ul id="tree" class="ztree" style='width:100%'>

						</ul>
				</div>
        <div id='readme' style='width:70%;margin-left:20%;'>
          	<article class='markdown-body'>
            	<h2 id="-">框架和库的区别?</h2>
<blockquote>
<p>框架(framework):一套完整的软件设计架构和<strong>解决方案</strong>。</p>
<p>库(library):对常用功能性函数的<strong>封装</strong>。</p>
<p>一般也可以认为框架大而全,库小而精。一个框架中可以包含或者集成多个库。</p>
</blockquote>
<ul>
<li><p>框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。</p>
</li>
<li><p>库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。</p>
</li>
</ul>
<h2 id="-">数组方法扩展</h2>
<ul>
<li><code>Array.prototype.forEach</code>:替代for循环对数组进行循环遍历</li>
</ul>
<pre><code class="lang-JavaScript">var list  = [1,2,3,4,5]
list.forEach(function(v,i){
    // v是当前遍历的这一个元素 i是这个元素的索引
    console.log(&#39;当前元素是&#39; + v,&#39;当前元素的索引是&#39; + i)
})
</code></pre>
<ul>
<li><code>Array.prototype.map</code>:对数组进行遍历,同时会返回一个新数组,新数组中的每一项都是回调函数中的返回值</li>
</ul>
<pre><code class="lang-JavaScript">var list = [1,2,3,4,5]
var newArr = list.map(function(v,i){
    // v是当前遍历的这一个元素 i是这个元素的索引
    console.log(&#39;当前元素是&#39; + v,&#39;当前元素的索引是&#39; + i)
    return v * 2
})
console.log(newArr) // [2,4,6,8,10]
</code></pre>
<ul>
<li><code>Array.prototype.findIndex</code>:对数组进行遍历,会返回一个满足回调函数条件的元素的索引</li>
</ul>
<pre><code class="lang-JavaScript">var list  = [1,2,3,4,5]
var index = list.findIndex(function(v,i){
    // v是当前遍历的这一个元素 i是这个元素的索引
    console.log(&#39;当前元素是&#39; + v,&#39;当前元素的索引是&#39; + i)
    if(v == 4){
        // 当return true时终止循环 同时将该元素的索引返回给findIndex函数
        return true
    }

    // 简写成
    // return v == 4
})
console.log(index) // 3
</code></pre>
<ul>
<li><code>Array.prototype.filter</code>:对数组进行遍历,返回一个新数组,新数组中的每一项都是满足回调函数中条件的元素,当满足条件时需要<code>return true</code></li>
</ul>
<pre><code class="lang-JavaScript">var list = [1,2,3,4,5]
var newArr = list.filter(function(v,i){
    // v是当前遍历的这一个元素 i是这个元素的索引
    console.log(&#39;当前元素是&#39; + v,&#39;当前元素的索引是&#39; + i)
    if(v%2 == 0){
        return true
    }

    // 简写成
    // return v%2 == 0
})
console.log(newArr) // [2,4]
</code></pre>
<ul>
<li><code>Array.prototype.some</code>:对数组进行遍历,返回一个布尔值,判断当前数组中是否有一个元素符合回调函数中的条件(特点:只要一个元素满足条件,最终返回结果就是true)</li>
</ul>
<pre><code class="lang-JavaScript">var list  = [1,2,3,4,5]
var flag = list.some(function(v,i){
    // v是当前遍历的这一个元素 i是这个元素的索引
    console.log(&#39;当前元素是&#39; + v,&#39;当前元素的索引是&#39; + i)
    if(v % 2 == 0){
        // return true时则终止继续循环
        return true
    }
})
console.log(flag) // true

// 注意: 由于遍历的数组第二个元素就满足了条件 所以循环到第二个元素时 就停止循环了
</code></pre>
<ul>
<li><code>Array.prototype.every</code>:对数组进行遍历,返回一个布尔值,判断当前数组中是否每一个元素都符合回调函数中的条件(特点:只要一个元素不满足条件,最终返回结果就是false)</li>
</ul>
<pre><code class="lang-JavaScript">var list  = [1,2,4,6,8]
var flag = list.every(function(v,i){
    // v是当前遍历的这一个元素 i是这个元素的索引
    console.log(&#39;当前元素是&#39; + v,&#39;当前元素的索引是&#39; + i)
    if(v % 2 == 0){
        // return true时则终止继续循环
        return true
    }
})
console.log(flag) // false

// 注意: 由于遍历的数组第一个元素就不满足条件 实际上循环一次就停止了
</code></pre>
<h2 id="vue-">Vue基础</h2>
<blockquote>
<p>MVC：对项目的整体把控,M代表的是数据库中的数据,V代表的是前端的视图层，C用于处理M和V之间进行交互的业务逻辑(业务逻辑需要程序员自己控制，自己编写)</p>
<p>MVVM:主要用于一些前端的框架,对MVC三层架构中的视图层再次进行层次划分，M是当前一个视图中需要用到的数据,V就是当前视图,VM负责M和V之间的数据调度,内部已经帮你完成了数据的绑定和交互</p>
<p>MVC和MVVM之间的区别:MVC数据流通是单向的,MVVM是双向数据绑定</p>
<p>双向数据绑定的意思就是模型中的数据可以之间更新到视图上,视图中的数据发生改变也可以直接更新到模型中
能够做到双向数据绑定(通信)的原因:就是因为有VM的存在，VM内部的实现一般是框架已经处理完成,不需要程序员进行控制</p>
</blockquote>
<ul>
<li>双向数据绑定原理: <code>Object.defineProperty</code>存取器</li>
</ul>
<blockquote>
<p>使用<code>Object.defineProperty</code>提供的set方法可以在给对象赋值时,触发额外操作,即在set函数内部去处理视图的更新</p>
</blockquote>
<pre><code class="lang-JavaScript">// 使用 Object.defineProperty 可以给对象赋值
var obj = {};

Object.defineProperty(obj,&#39;name&#39;,{
    value:&#39;zxx&#39;
})

console.log(obj.name)

var obj = {};
var initValue = &#39;zxx&#39;
Object.defineProperty(obj,&#39;name&#39;,{
    get:function(){
        console.log(&#39;我被读取了&#39;)
        return initValue
    },
    set:function(v){
        console.log(&#39;我被赋值了&#39;)
        initValue = v
    }
})
obj.name = &#39;lxy&#39;
console.log(obj.name)
</code></pre>
<h3 id="vue-">Vue基本编码步骤</h3>
<ol>
<li><p>引入vue.js文件</p>
<pre><code> &lt;script src=&quot;./lib/vue-2.4.0.js&quot;&gt;&lt;/script&gt;
</code></pre></li>
<li><p>定义一个vue的管理范围</p>
<pre><code> &lt;div id=&#39;app&#39;&gt;

 &lt;/div&gt;

 vue1.0里面vue的管理区域的id可以定义在HTML以及body标签上
 vue2.0里面不允许这样来做
</code></pre></li>
<li><p>定义一个vue的对象</p>
<pre><code> var vm = new Vue({
     el:&#39;#app&#39;,
     // data定义vue实例的所有属性
     data:{
         // 定义将来要在vue管理区域中使用的数据
         name：&quot;zs&quot;
     },
     // methods定义vue实例所有的方法
     methods：{
         fn:function(){
             this.name = &#39;ls&#39;
         }
     }
 })
</code></pre></li>
</ol>
<h3 id="vue-">Vue系统指令</h3>
<ul>
<li><code>{{}}</code>:插值表达式</li>
</ul>
<pre><code>    作用:将vue对象中的数据以及表达式显示到vue托管区域中

    {{这里书写vue对象中data里面的数据或者表达式}}
</code></pre><ul>
<li><p><code>v-cloak</code>:解决表达式闪烁问题</p>
<pre><code>  1. 定义一个样式
  &lt;style&gt;
    [v-cloak]{
        display:none
    }
  &lt;/style&gt;

  2. 使用

  &lt;div v-cloak&gt;{{name}}&lt;/div&gt;

  原理:当vue.js文件还没有加载出来时 使用[v-cloak]样式作用于当前指令所在标签,当vue.js能够起作用时,会自动删除v-cloak指令
</code></pre></li>
<li><p><code>v-text</code>:输出文本数据</p>
<pre><code>  &lt;span v-text=&#39;name&#39;&gt;&lt;/span&gt;
</code></pre></li>
<li><p><code>v-html</code>:输出HTML结构数据</p>
<pre><code>  &lt;div v-html=&#39;name&#39;&gt;&lt;/div&gt;

  data：{
      name：&#39;&lt;span&gt;zs&lt;/span&gt;&#39;
  }
</code></pre></li>
<li><p><code>v-bind</code>:动态给标签或者组件绑定属性</p>
<pre><code>  &lt;div v-bind:class = &#39;cls&#39;&gt;&lt;/div&gt;
  // 使用:简写v-bind
  &lt;div :class = &#39;cls&#39;&gt;&lt;/div&gt;

  // 变量和常量组合
  &lt;a :href=&quot;&#39;http://www.baidu.com/index/&#39; + id&quot;&gt;跳转&lt;/a&gt;

  data：{
      cls: &#39;red blue&#39;,
      id: 1
  }
</code></pre></li>
<li><p><code>v-on</code>:绑定事件</p>
<pre><code>  &lt;div v-on:click = &#39;show&#39;&gt;&lt;/div&gt;
  // 简写
  &lt;div @click = &#39;show&#39;&gt;&lt;/div&gt;

  methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
      show: function () {
        alert(&#39;Hello&#39;)
      }
   }
</code></pre></li>
<li><p><code>v-model</code>：双向数据绑定</p>
<pre><code>  // 可以使用的标签:input textarea select 组件
  &lt;input v-model=&#39;name&#39;&gt;&lt;/input&gt;

  // name会和表单元素的value进行关联 value值变化 name值变化 反过来name值发生变化 value值也会发生变化
</code></pre></li>
<li><code>v-for</code>:循环输出HTML元素<pre><code>  &lt;div v-for=&#39;(item,index) in list&#39; :key = &#39;index&#39;&gt;{{item.name}}&lt;/div&gt;
</code></pre></li>
<li><code>v-if</code>：根据表达式值的真假决定元素的显示隐藏<pre><code>  // isShow为true显示div 为false隐藏div
  // v-if是直接操作DOM 即隐藏时会将该div从DOM结构中移除
  &lt;div v-if=&#39;isShow&#39;&gt;&lt;/div&gt;
</code></pre></li>
<li><p><code>v-show</code>: 根据表达式值的真假决定元素的显示隐藏</p>
<pre><code>  // isShow为true显示div 为false隐藏div
  // v-show是操作div的样式 显示时添加 style = &#39;display:block&#39;; 隐藏时添加style = &#39;display:none&#39;
  &lt;div v-if=&#39;isShow&#39;&gt;&lt;/div&gt;

  v-if 是删除DOM元素 效率比较低 会造成页面的结构重新绘制
  v-show 是控制样式 只会改变当前这一个元素的样式 不会造成页面结构的重新绘制
</code></pre></li>
</ul>
<h3 id="-vue-">在Vue中使用样式</h3>
<h4 id="-class-">使用class样式</h4>
<ol>
<li><p>数组</p>
<pre><code>&lt;h1 :class=&quot;[&#39;red&#39;, &#39;thin&#39;]&quot;&gt;这是一个邪恶的H1&lt;/h1&gt;
</code></pre></li>
<li><p>数组中使用三元表达式</p>
<pre><code>&lt;h1 :class=&quot;[&#39;red&#39;, &#39;thin&#39;, isactive?&#39;active&#39;:&#39;&#39;]&quot;&gt;这是一个邪恶的H1&lt;/h1&gt;
</code></pre></li>
<li><p>数组中嵌套对象</p>
<pre><code>&lt;h1 :class=&quot;[&#39;red&#39;, &#39;thin&#39;, {&#39;active&#39;: isactive}]&quot;&gt;这是一个邪恶的H1&lt;/h1&gt;
</code></pre></li>
<li><p>直接使用对象</p>
<pre><code>&lt;h1 :class=&quot;{red:true, italic:true, active:true, thin:true}&quot;&gt;这是一个邪恶的H1&lt;/h1&gt;
</code></pre></li>
</ol>
<h4 id="-">使用内联样式</h4>
<ol>
<li><p>直接在元素上通过 <code>:style</code> 的形式，书写样式对象</p>
<pre><code>&lt;h1 :style=&quot;{color: &#39;red&#39;, &#39;font-size&#39;: &#39;40px&#39;}&quot;&gt;这是一个善良的H1&lt;/h1&gt;
</code></pre></li>
<li><p>将样式对象，定义到 <code>data</code> 中，并直接引用到 <code>:style</code> 中</p>
<ul>
<li>在data上定义样式：<pre><code>data: {
   h1StyleObj: { color: &#39;red&#39;, &#39;font-size&#39;: &#39;40px&#39;, &#39;font-weight&#39;: &#39;200&#39; }
}
</code></pre></li>
<li>在元素中，通过属性绑定的形式，将样式对象应用到元素中：<pre><code>&lt;h1 :style=&quot;h1StyleObj&quot;&gt;这是一个善良的H1&lt;/h1&gt;
</code></pre></li>
</ul>
</li>
<li><p>在 <code>:style</code> 中通过数组，引用多个 <code>data</code> 上的样式对象</p>
<ul>
<li>在data上定义样式：<pre><code>data: {
   h1StyleObj: { color: &#39;red&#39;, &#39;font-size&#39;: &#39;40px&#39;, &#39;font-weight&#39;: &#39;200&#39; },
   h1StyleObj2: { fontStyle: &#39;italic&#39; }
}
</code></pre></li>
<li>在元素中，通过属性绑定的形式，将样式对象应用到元素中：<pre><code>&lt;h1 :style=&quot;[h1StyleObj, h1StyleObj2]&quot;&gt;这是一个善良的H1&lt;/h1&gt;
</code></pre></li>
</ul>
</li>
</ol>
<h3 id="-">过滤器</h3>
<blockquote>
<p><code>过滤器</code>:对需要展示的数据进行加工处理后再展示到界面，并不会改变原数据</p>
</blockquote>
<ul>
<li>全局过滤器:当前页面所有Vue实例的托管区域都可以使用</li>
</ul>
<pre><code class="lang-JavaScript">Vue.filter(&#39;过滤器名称&#39;,function(value,arg){
    // value就是需要处理的原始数据 arg是使用过滤器时传递的参数
    // 对数据处理的业务逻辑
    return 处理完毕的数据
})

使用方法：原始数据 | 过滤器名称(参数)
</code></pre>
<ul>
<li>私有过滤器:只有当前定义过滤器的Vue实例所托管的区域可以使用</li>
</ul>
<pre><code class="lang-JavaScript">new Vue({
    el:&#39;#app&#39;,
    // 私有过滤器
    filters:{
        &#39;过滤器的名称&#39;:function(value){
            return 处理完毕的数据
        }
    }
})
</code></pre>
<h3 id="-">自定义指令</h3>
<blockquote>
<p><code>指令</code>: 其实就是Vue给我们提供的操作DOM元素的一些方法</p>
</blockquote>
<ul>
<li>全局指令</li>
</ul>
<pre><code class="lang-JavaScript">Vue.directive(&#39;指令名称&#39;,{
    // 指令第一次绑定到元素身上时执行(在内存中绑定到了DOM对象上边)
    bind:function(el,binding,VNode){
        // el: 指令所在的DOM元素对象
        // binging.value 指令等号右边表达式的值
        // binging.expression 指令等号右边表达式
        // VNode.context 当前指令所在托管区域对于的Vue实例对象
    },
    // 当前指令所在元素插入到父节点时调用(不保证DOM已经渲染完毕)
    inserted:function(){},
    // 指令绑定的值发生变化时会去执行
    update:function(){},
    // 指令所在的组件值更新完毕时调用
    componentUpdated:function(){},
    // 自定义指令从当前元素解绑时调用
    unbind:function(){}
})
</code></pre>
<ul>
<li>私有指令</li>
</ul>
<pre><code class="lang-JavaScript">new Vue({
    el:&#39;#app&#39;,
    // 私有指令
    directives:{
        &#39;指令名称&#39;:{
            bind:function(el,binding){

            }
        }
    },
    // 私有过滤器
    filters:{
        &#39;过滤器的名称&#39;:function(value){
            return 处理完毕的数据
        }
    }
})
</code></pre>
<h2 id="-">生命周期钩子函数</h2>
<blockquote>
<p>回调函数:一个函数被当做参数进行传递的时候,称作这个函数为回调函数</p>
<p>构造函数:一个函数被new 关键字引导执行的时候,称作这个函数为构造函数</p>
<p>钩子函数: 一个应用程序或者框架内部提前定义好的一批函数,这些函数会在特定的时间段自动执行</p>
<p>生命周期: 一个程序会存在初始化 - 运行 - 销毁等阶段,这些阶段统称为该程序的生命周期</p>
</blockquote>
<pre><code>new Vue({
    el:&#39;#app&#39;,
    data:{},
    methods:{},
    beforeCreated(){},
    // data中的数据和methods中的方法已经初始化完毕会去自动执行created方法
    created(){
        // 用于发生数据请求,也可以初始化一些数据
    },
    beforeMount(){},
    // 真实DOM已经渲染完毕会执行mounted函数
    mounted(){
        // 操作真实DOM
    }
    beforeUpdate(){},
    // data中的发生了变化而且被重新渲染到了界面上时才会执行
    updated(){
        // 数据更新后重新操作DOM
    },
    // 实例销毁之前,实例上面的各种属性和方法都还可以正常访问,通常可以在这里手动回收一些页面没有被释放的变量,比如清楚定时器的操作。
    beforeDestroy(){},
    // 实例已经从内存中被销毁
    destroyed(){}
})
</code></pre><h2 id="vue-resource-ajax-">vue-resource发生ajax请求</h2>
<blockquote>
<p>vue.studyit.io</p>
</blockquote>
<pre><code class="lang-javascript">// get请求
this.$http.get(&#39;url&#39;).then(function(res){
    // res.body 里面就是请求回来的数据
})

// post 请求 application/x-www-form-urlencode -&gt; name=zs&amp;age=18
// application/json =&gt; {&#39;name&#39;:&#39;zs&#39;,&#39;age&#39;:18}
this.$http.post(&#39;url&#39;,{name:&#39;zs&#39;,age:18},{emulateJSON:true}).then(function(res){
    // res.body
})

// jsonp请求
this.$http.jsonp(&#39;url&#39;).then(function(res){
    // res.body
})
</code></pre>
<ul>
<li><strong>JSONP</strong>:JSON数据格式的一种使用方式,用于解决跨域问题</li>
<li><strong>跨域</strong>: 由于浏览器同源策略的限制,不同源的URL不能互相通信,这种现象叫做跨域</li>
<li><strong>同源策略</strong>: 两个域名只有 <strong>协议</strong> <strong>主机地址</strong> <strong>端口号</strong>完全一致时才能相互通信访问</li>
<li><p><strong>JSONP实现原理</strong>：利用script标签的src属性发送请求不受同源策略的限制这个机制去实现跨域资源共享(script标签能够跨域访问是历史遗留问题,并不安全) </p>
<ol>
<li>动态创建一个script标签,并且将需要请求的URL地址设置给script标签的src属性,同时在URL地址后面拼接上一个回调函数名称<pre><code> function getJson(data){
     console.log(data)
 }
 &lt;script src = &#39;http://lovegf.cn/jsonp?callback=getJson&#39;&gt; // getJson就是在前端本地定义好的一个方法的方法名
</code></pre></li>
<li>后台接收到该请求后,先根据参数判断是否是JSONP请求,如果是,则将客户端请求的数据整理好,和前端发送过来的方法名一起拼接成一个函数调用的字符串,客户端需要的数据就是这个函数调用时传的参数<pre><code> // 假设要发送给前端的数据是 &#39;ok&#39;
 &#39;getJson(&#39;ok&#39;)&#39;
 // 响应给前端
 res.end(&#39;getJson(&#39;ok&#39;)&#39;)
</code></pre></li>
<li>由于后台响应回来的数据是一个字符串,而且是函数调用,所以前端拿到响应回来的数据相当于调用了该方法,那么前端定义好的方法会自动执行,而且方法内的形参可以接收到实参值,也就是后台拼接的数据<pre><code> function getJson(data){
     console.log(data) // ok
 }
</code></pre></li>
<li>数据拿到之后,一般这个动态创建的script标签会被删除掉</li>
</ol>
</li>
</ul>
<h2 id="vue-">vue过渡动画</h2>
<h3 id="-css-">原生css类实现</h3>
<pre><code class="lang-JavaScript">// 1. 将需要实现动画的元素使用transition标签包裹起来
&lt;transition&gt;
    &lt;div&gt;我是需要过渡动画的元素&lt;/div&gt;
&lt;/transition&gt;

// 2. 使用系统提供的类名书写动画样式
&lt;style&gt;
// v-enter: 动画进入时候的初始状态
// v-leave-to: 动画离开时候的结束状态
v-enter,v-leave-to {

}

// v-enter-active: 动画进入期间持续状态
// v-enter-active: 动画离开期间持续状态 
v-enter-active,v-leave-active {

}

// 动画离开时候的初始状态
// 动画进入时候的结束状态
v-leave,v-enter-to {

}

// 3. 也可以使用transition上面的name属性指定v-前缀
&lt;/style&gt;
</code></pre>
<h3 id="animatie-css-">animatie.css类库实现</h3>
<pre><code class="lang-JavaScript">// 1. 将需要实现动画的元素使用transition标签包裹起来
&lt;transition&gt;
    &lt;div&gt;我是需要过渡动画的元素&lt;/div&gt;
&lt;/transition&gt;

// 2. 在transition上设置动画类名
&lt;transition 
    enter-active-class=&quot;bounceIn&quot; 
    leave-active-class=&quot;bounceOut&quot; 
    :duration=&quot;{ enter: 200, leave: 400 }&quot;&gt;
    &lt;div&gt;我是需要过渡动画的元素&lt;/div&gt;
&lt;/transition&gt;
</code></pre>
<h3 id="-">动画钩子函数实现</h3>
<pre><code class="lang-javascript">// 1. 将需要实现动画的元素使用transition标签包裹起来
&lt;transition&gt;
    &lt;div&gt;我是需要过渡动画的元素&lt;/div&gt;
&lt;/transition&gt;

// 2. 在transition上注册实现动画的钩子函数,入场动画三个,出场动画三个
&lt;transition 
@before-enter = &#39;beforeEnter&#39;
@enter = &#39;enter&#39;
@after-enter = &#39;afterEnter&#39;
@before-leave = &#39;beforeLeave&#39;
@leave = &#39;leave&#39;
@after-leave = &#39;afterLeave&#39;
&gt;
    &lt;div&gt;我是需要过渡动画的元素&lt;/div&gt;
&lt;/transition&gt;

// 3. 在vue实例的methods中定义钩子函数
new Vue({
    el:&#39;#app&#39;,
    data:{},
    methods:{
        // 入场动画初始状态设置
        beforeEnter(){
            // 一般使用JS设置执行动画元素的初始位置和其他样式属性
        },
        // 入场动画持续过程
        enter(el,done){
            // 1. 固定写法 迫使浏览器重绘 刷新动画
            el.offsetWidth
            // 2. 一般设置执行动画元素最终的位置和其他样式属性

            // 3. 固定写法 调用afterEnter函数
            done()
        },
        // 入场动画结束状态
        afterEnter(){
            // 设置动画元素回到初始状态
        },
        // 出场动画初始状态
        beforeLeave(){

        },
        // 出场动画持续状态
        leave(){

        },
        // 出场动画结束状态
        afterLeave(){

        }
    }
})
</code></pre>
<h3 id="transition-group-">transition-group列表渲染</h3>
<blockquote>
<p>如果需要渲染的元素是一个列表,则不能使用transition包裹元素,需要使用transition-group</p>
</blockquote>
<ul>
<li><code>appear</code>属性可以使默认出现的元素出现过渡动画</li>
<li><code>tag</code>属性可以指定<code>transition-group</code>标签被渲染成一个什么元素,默认情况下<code>transition-group</code>会被渲染成<code>span</code></li>
</ul>
<pre><code>&lt;transition-group appear tag = &#39;div&#39;&gt;
    &lt;div v-for = &#39;(item,index) in list&#39; :key = &#39;index&#39;&gt;&lt;/div&gt;
&lt;/transition-group&gt;
</code></pre><h2 id="-">组件</h2>
<blockquote>
<p><a href="http://blog.gdfengshuo.com/example/work/#/login">http://blog.gdfengshuo.com/example/work/#/login</a></p>
<p><a href="https://github.com/UniverseKing/awesome-github-vue">https://github.com/UniverseKing/awesome-github-vue</a></p>
<p><strong>注意</strong>:</p>
<ol>
<li>定义组件时如果使用的是驼峰命名,那么使用组件时需要将驼峰的大写字母转成小写,并且用-连接两个单词 <pre><code class="lang-javascript">Vue.component(&#39;myCom&#39;,{
 template:&#39;&lt;div&gt;我是一个驼峰命名的组件&lt;/div&gt;&#39;
})
// 使用
&lt;my-com&gt;&lt;/my-com&gt;
</code></pre>
</li>
<li>组件的<code>template</code>属性中的模版内部如果有多个元素,必须被包含在唯一的一个根元素中<pre><code class="lang-javascript">&lt;template&gt;
 &lt;div&gt;
     &lt;p&gt;我是p元素&lt;/p&gt;
     &lt;span&gt;我是span元素&lt;/span&gt;
 &lt;/div&gt;
&lt;/template&gt;
</code></pre>
</li>
<li>私有组件(子组件)使用<code>components</code>属性进行定义,定义好的私有组件只能在父组件的模板中使用<pre><code class="lang-javascript">&lt;template id=&#39;father&#39;&gt;
 &lt;div&gt;
     &lt;son&gt;&lt;/son&gt;
 &lt;/div&gt;
&lt;/template&gt;
// 父组件
Vue.component(&#39;father&#39;,{
 template:&#39;#father&#39;,
 components:{
     // 子组件
     son:{
         template:&#39;&lt;div&gt;我是son组件&lt;/div&gt;&#39;
     }
 }
})
</code></pre>
</li>
</ol>
</blockquote>
<h3 id="-">全局组件的三种定义方式</h3>
<ul>
<li><code>vue.extend()</code>定义</li>
</ul>
<pre><code class="lang-javascript">// 1. 使用vue.extend()定义组件模板
var dv = Vue.extend({
    template:&#39;&lt;div&gt;我是一个组件&lt;/div&gt;&#39;
})

// 2. 使用Vue.component()注册组件
Vue.component(&#39;com&#39;,dv)

// 3. 在Vue托管区域像使用普通HTML标签一样使用组件
&lt;com&gt;&lt;/com&gt;
</code></pre>
<ul>
<li><code>vue.component()</code>定义</li>
</ul>
<pre><code class="lang-javascript">// 1. 使用Vue.component定义组件
Vue.component(&#39;com&#39;,{
    template:&#39;&lt;div&gt;&lt;p&gt;我是一个组件中的元素&lt;/p&gt;&lt;span&gt;我也是组件中的元素&lt;/span&gt;&lt;/div&gt;&#39;
})

// 2. 使用组件
&lt;com&gt;&lt;/com&gt;
</code></pre>
<ul>
<li>使用<code>template</code>标签定义模板</li>
</ul>
<pre><code class="lang-javascript">// 1. 使用Vue.component定义组件，并且使用选择器选择模板
Vue.component(&#39;com&#39;,{
    template:&#39;#temp&#39;
}) 

// 2. 使用template标签定义模板,并且给template标签添加id
&lt;template id=&#39;tmpl&#39;&gt;
    &lt;div&gt;
        &lt;p&gt;我是p元素&lt;/p&gt;
        &lt;span&gt;我是span元素&lt;/span&gt;
    &lt;/div&gt;
&lt;/template&gt;

// 3. 使用组件
&lt;com&gt;&lt;/com&gt;
</code></pre>
<h3 id="-">私有组件的定义方式</h3>
<blockquote>
<p>私有组件使用<code>components</code>属性进行定义,该属性可以定义在Vue实例内部,也可以定义在组件内部,私有组件一般也是其他组件的子组件</p>
</blockquote>
<pre><code class="lang-javascript">// Vue实例的私有组件
new Vue({
    el:&#39;#app&#39;,
    data:{},
    methods:{},
    components:{
        &#39;login&#39;: {
            template:&#39;&lt;div&gt;我是一个私有组件,只能使用在当前#appVue实例托管区域内部&lt;/div&gt;&#39;
        }
    }
})


// 组件的私有组件(子组件)
&lt;template id=&#39;account&#39;&gt;
    &lt;div&gt;
        我是账号组件,我有两个子组件login和register
        &lt;login&gt;&lt;/login&gt;
        &lt;register&gt;&lt;/register&gt;
    &lt;/div&gt;
&lt;/template&gt;
Vue.component(&#39;account&#39;,{
    tempalte:&#39;#account&#39;,
    components:{
        &#39;login&#39;:{
            template:&#39;&lt;div&gt;&lt;com&gt;&lt;/com&gt;我是登录组件,我的父组件是account&lt;/div&gt;&#39;,
            components:{
                &#39;com&#39;:{
                    template:&#39;&lt;div&gt;123&lt;/div&gt;&#39;
                }
            }
        },
        &#39;register&#39;:{
            template:&#39;&lt;div&gt;我是注册组件,我的父组件是account&lt;/div&gt;&#39;
        }
    }
})
</code></pre>
<h3 id="is-component-">is属性和component实现组件切换</h3>
<pre><code>// comname 是哪个组件名,则component就会被渲染成哪个组件
// component 就是一个占位标签 
&lt;component :is=&#39;comname&#39;&gt;&lt;/component&gt;

new Vue({
    el:&#39;#app&#39;,
    comname:&#39;login&#39;
})
</code></pre><h3 id="-">父子组件传值</h3>
<h4 id="-">父向子传值</h4>
<pre><code class="lang-javascript">// 1. 先在父组件中定义好要传递的数据
new Vue({
    el:&#39;#app&#39;
    data:{
        msg:&#39;我是要传递给子组件的数据&#39;
    },
    components:{
        son:{
            template:&#39;&lt;div&gt;我是子组件{{message}}&lt;/div&gt;&#39;,
            props:[&#39;message&#39;]
        }
    }
})

// 2. 在父组件中使用子组件的时候,用绑定属性的方式将父组件中的数据传递给子组件
&lt;div id=&#39;app&#39;&gt;
    &lt;son v-bind:message = &#39;msg&#39;&gt;&lt;/son&gt;
&lt;/div&gt;

// 3. 在子组件中定义一个props属性,该属性是一个数组,数组中定义用于接收传过来的变量。这个变量
// 和第二步绑定的这个属性同名
son:{
    template:&#39;&lt;div&gt;我是子组件&lt;/div&gt;&#39;,
    props:[&#39;message&#39;]
}
</code></pre>
<h4 id="-">子向父传值</h4>
<blockquote>
<p>发布订阅者 设计模式</p>
</blockquote>
<pre><code class="lang-javascript">// 1. 定义好父子组件,定义好子组件需要传递给父组件的数据
new Vue({
    el:&#39;#app&#39;
    components:{
        son:{
            template:&#39;&lt;div&gt;我是子组件{{message}}&lt;/div&gt;&#39;,
            data:function(){
                return {
                    msg:&#39;传给父组件的数据&#39;
                }
            }
        }
    }
})

// 2. 在子组件中使用this.$emit触发一个自定义的方法名,然后传递数据
// 第一个参数就是自定义的方法名
// 第二个参数就是需要传递给父组件的数据
this.$emit(&#39;func&#39;,this.msg)

// 3. 在父组件中使用子组件时,绑定一个事件,事件名称和子组件触发的方法名同名
&lt;div id=&#39;app&#39;&gt;
    &lt;son @func = &#39;getmsg&#39;&gt;&lt;/son&gt;
&lt;/div&gt;

// 4. 在父组件的methods中定义一个事件处理函数
methods:{
    getmsg:function(data){
        // data就是子组件传过来的数据
    }
}
</code></pre>
<h3 id="ref-dom-">ref获取DOM和组件对象</h3>
<pre><code class="lang-javascript">// 1. 在DOM元素或者组件上面绑定ref属性
&lt;div ref=&#39;mydiv&#39;&gt;我是一个div&lt;/div&gt;
&lt;com ref = &#39;mycom&#39;&gt;&lt;/com&gt;
// 2. 使用this.$refs.属性值获取对象引用
this.$refs.mydiv // DOM对象
this.$refs.mycom // 组件对象
</code></pre>
<h2 id="vur-router-">vur-router路由</h2>
<blockquote>
<p><strong>后端路由</strong>: 服务端对前端请求的URL地址的监听,一个路由地址对应一个资源</p>
<p><strong>前端路由</strong>: 浏览器对前端页面实现的跳转方式,一般只在单页应用(SPA)程序中出现</p>
<p>router  route routes  的区别是?</p>
<ul>
<li>router: 是Vue实例内部的一个属性,是专门用来挂载vue-router对象的</li>
<li>route: 表示routers内部的每一个路由对象的引用</li>
<li>routes: 是Vue-Router实例内部的一个属性,是用来保存所有的路由规则</li>
</ul>
</blockquote>
<h3 id="-">基本使用步骤</h3>
<pre><code class="lang-javascript">1. 创建路由对象并配置路由规则
// 1.1 创建组件模板对象
var login = {
    template:&#39;&lt;div&gt;登录&lt;/div&gt;&#39;
}
var register = {
    template:&#39;&lt;div&gt;注册&lt;/div&gt;&#39;
}
// 1.2 创建路由对象并配置路由规则
var router1 = new VueRouter({
    // routes用来存放路由规则,每个路由规则都是一个对象
    routes:[
        // path: 页面#后面的地址
        // component 需要显示的组件对象
        {path:&#39;/&#39;,redirect:&#39;/login&#39;},
        {path:&#39;/login&#39;,component:login},
        {path:&#39;/register&#39;,component:register}
    ]
})

// 1.3 将创建处理的路由对象和Vue进行绑定
new Vue({
    el:&#39;#app&#39;,
    // 将vuerouter对象注册到Vue内部,以保证在托管区域中科院使用VueRouter内部提供的组件以及其他属性和方法
    router:router1
})

2. 使用&lt;router-view&gt;进行占位
&lt;div id=&#39;app&#39;&gt;  
    &lt;router-view&gt;&lt;/router-view&gt;
&lt;div&gt;

3. 使用&lt;router-link&gt;设置跳转路径
&lt;router-link to=&#39;/login&#39;&gt;登录&lt;/router-link&gt;
</code></pre>
<h3 id="redirect-">redirect重定向</h3>
<blockquote>
<p>在路由规则中配置<code>redirect</code>属性可以使路由进行内部切换,当访问<code>path</code>中的路径时,会默认跳转到<code>redirect</code>中指定的路径去。</p>
</blockquote>
<pre><code class="lang-JavaScript">{path:&#39;/&#39;,redirect:&#39;/login&#39;} // 当访问根路径时,会默认跳转到login路径中
</code></pre>
<h3 id="linkactiveclass-">linkActiveClass路由高亮</h3>
<blockquote>
<p><code>linkActiveClass</code> 用来设置被激活路由的样式类,默认类名是<code>router-link-active</code></p>
</blockquote>
<pre><code class="lang-JavaScript">new VueRouter({
    linkActiveClass:&#39;mylink&#39; // 被选中的路由对应的标签上面会有一个类名叫mylink
})
</code></pre>
<h3 id="-">路由传参</h3>
<h4 id="query-">query传参</h4>
<pre><code class="lang-JavaScript">// 1. 在跳转路径后面使用查询字符串拼接参数
&lt;router-link to = &#39;/login?name=zs$age=18&#39;&gt;登录&lt;/router-link&gt;

// 2. 在路由对应的组件内部使用`this.$route.query`获取参数
this.$route.query.name // zs
this.$route.query.id // 18
</code></pre>
<h4 id="params-">params传参</h4>
<pre><code class="lang-JavaScript">// 1. 更改路由规则用于匹配参数
new VueRouter({
    routes:[
        // :id用于匹配/login/13后面的参数13
        {path:&#39;/login/:id&#39;,component:login}
    ]
})
// 2. 在跳转路径后面使用/拼接参数
&lt;router-link to = &#39;/login/13&#39;&gt;登录&lt;/router-link&gt;

// 3. 在路由对应组件内部使用`this.$route.params`获取参数
var login = {
    template:&#39;&lt;div&gt;登录组件{{this.$route.params.id}}&lt;/div&gt;&#39;,
    created(){
        console.log(this.$route.params.id) // 获取到的就是13
    }
}
</code></pre>
<h3 id="-">嵌套路由</h3>
<pre><code class="lang-JavaScript">// 1. 在父路由内部使用children属性配置子路由规则,子路由规则对象中的path属性不要 &#39;/&#39; 
// 2. 在父路由规则对应的组件模板中添加router-view用于显示子路由规则对应的组件
// 3. 在&lt;router-link&gt;中设置跳转路径(将父路由和子路由的path拼接)
</code></pre>
<h3 id="-">路由命名视图</h3>
<blockquote>
<p>给<code>&lt;router-view&gt;</code>添加name属性,用于指定显示哪一个组件</p>
</blockquote>
<pre><code class="lang-JavaScript">// 1. 将路由规则对象中的component改为components,表示一个路由规则下可以显示多个组件,每一个组件用一个名称对应起来,默认显示的组件用default对应
new VueRouter({
    routes:[
        // components对象内部按照 名称 - 组件对象的方式定义
        {path:&#39;/&#39;,components:{
            &#39;default&#39;: header,
            &#39;left&#39;: leftBox,
            &#39;main&#39;: mainBox
        }}
    ]
})

// 2. 给&lt;router-view&gt;添加name属性指定显示哪一个组件
&lt;router-view&gt;&lt;/router-view&gt;  // 不指定默认显示default对应的组件
&lt;router-view name = &#39;left&#39;&gt;&lt;/router-view&gt; // 显示leftBox组件
&lt;router-view name = &#39;main&#39;&gt;&lt;/router-view&gt; // 显示mainBox组件
</code></pre>
<h2 id="watch-">watch的使用</h2>
<blockquote>
<p><code>watch</code>: 用于监听data中定义的数据的变化,只要被监听的数据发生了变化,就会执行对应的处理函数</p>
</blockquote>
<h3 id="watch-">watch监视数据变化</h3>
<pre><code>new Vue({
    el:&#39;#app&#39;,
    data:{
        msg:&#39;hello&#39;
    },
    watch:{
        &#39;msg&#39;: function(newVal,oldVal){
            // newVal 表示变化后的值 oldVal 表示变化前的值
            // 只要data中定义的msg发生了改变,就会执行这个函数
        }
    }
})
</code></pre><h3 id="watch-">watch监视路由变化</h3>
<blockquote>
<p>通过监听<code>$route.path</code>可以监视到路由地址的变化</p>
</blockquote>
<pre><code class="lang-javascript">new Vue({
    el:&#39;#app&#39;,
    watch:{
        &#39;$route.path&#39;: function(newVal,oldVal){
           // newVal 新跳转的路由地址
           // oldVal 跳转之前的路由地址
        }
    }
})
</code></pre>
<h2 id="computed-">computed计算属性</h2>
<blockquote>
<p><code>computed</code>:计算属性,是指在computed对象中定义属性,属性的值是该属性后面函数的返回值,而且函数内部如果用到了data中定义的其他数据,只要这些数据发生了变化,都会重新触发函数的执行,计算属性的值也会发生变化。</p>
</blockquote>
<pre><code class="lang-javascript">new Vue({
    el:&#39;#app&#39;,
    data:{
        msg:&#39;hello&#39;
    },
    computed:{
        &#39;info&#39;: function(){
            // 只要msg发生了变化,会重新触发该函数的执行
            // info的值就是函数的返回值
           return this.msg + &#39;world&#39;
        }
    },
    methods:{},
    watch:{}
})
</code></pre>
<h3 id="watch-computed-">watch 和 computed计算属性的区别</h3>
<blockquote>
<p>watch可以对data中申明过的数据进行监视,只要被监视的数据发生了变化,就会触发对应函数</p>
<p>computed定义计算属性,定义的属性和在data中定义的使用方式一样,但是computed中的属性值是对应函数的返回值,只要函数中依赖的其他数据发生了变化,会重新计算返回值</p>
</blockquote>
<h3 id="data-props-computed-">data、props、computed的区别</h3>
<blockquote>
<p>data中的相当于申明变量,可以直接赋值也可以随后赋值</p>
<p>props中数据是从其他组件传递得到</p>
<p>computed中的数据是通过计算得到,是属性对应函数的返回值,计算结果会被缓存</p>
</blockquote>
<ul>
<li><p>npm: node package manager node包管理工具</p>
</li>
<li><p>nrm: node registry manager node 镜像地址管理工具</p>
</li>
<li><p>nvm: node version manager node 版本管理工具</p>
</li>
</ul>
<h2 id="webpack-">webpack的学习</h2>
<blockquote>
<p>什么是webpack? 一个基于Node的前端构建工具,可以实现对项目的打包(构建),主要解决文件(模块)之间的依赖,高级代码的转译,文件(模块)的合并和压缩等问题。</p>
</blockquote>
<h3 id="-">基本使用</h3>
<ul>
<li><code>webpack3.~</code>版本安装使用</li>
</ul>
<pre><code class="lang-JavaScript">// 1. 全局安装webpack
npm i webpack@3.10.0 -g

// 2. 使用
webpack 入口文件 输出文件
webpack ./src/main.js ./dist/build.js
</code></pre>
<ul>
<li><code>webpack4.~</code>版本安装使用</li>
</ul>
<pre><code class="lang-JavaScript">// 1. 全局安装webpack
npm i webpack  -g
npm i webpack-cli -g

// 2. 使用
webpack 入口文件 -o 输出文件 --mode development/production
webpack ./src/main.js -o ./dist/build.js --mode development
</code></pre>
<h3 id="webpack-">webpack配置文件使用</h3>
<pre><code class="lang-javascript">// 1. 在项目根目录新建webpack.config.js,并设置 打包的入口文件 和 输出文件
module.exports = {
    // 入口文件(绝对路径)
    entry: path.join(__dirname,&#39;./src/main.js&#39;),
    // 输出文件
    output: {
        path: path.join(__dirname,&#39;./dist&#39;), // 输出文件目录
        filename: &#39;build.js&#39; // 输出文件名称
    }
}

// 2. 执行打包命令
webpack
</code></pre>
<h3 id="webpack-dev-server-">webpack-dev-server的使用</h3>
<blockquote>
</blockquote>
<h4 id="-">命令行方式</h4>
<blockquote>
<p><code>--hot</code>: 热更新,可以局部更新文件
<code>--open</code>: 自动打开浏览器
<code>--port</code>: 配置端口号
<code>--contentBase</code>: 指定服务器目录</p>
</blockquote>
<pre><code class="lang-javascript">// 1. 局部安装webpack-dev-server和webpack
npm i webpack-dev-server webpack --save-dev

// 2. 在package.json的scripts节点中添加启动命令
&quot;scripts&quot;:{
    &quot;dev&quot;:&quot;webpack-dev-server --open --hot --contentBase --port 8888&quot;
}

// 3. 在项目根目录运行项目
npm run dev
</code></pre>
<h4 id="-">配置文件方式</h4>
<pre><code class="lang-javascript">// 1. 在webpack.config.js配置文件中添加如下配置
devServer:{
    open: true,
    port: 8888,
    contentBase: &#39;src&#39;,
    hot: true
}

// 2. 如果设置了 hot:true 这个属性,则需要配置热更新插件
// 2.0 引入webpack模块
const webpack = require(&#39;webpack&#39;)
// 2.1 配置热更新插件
plugins: [
    new webpack.HotModuleReplacementPlugin()
]

// 3. package.json中配置启动命令
&quot;scripts&quot;:{
    &quot;dev&quot;:&quot;webpack-dev-server&quot;
}
</code></pre>
<h3 id="-html-webpack-plugin-"><code>html-webpack-plugin</code>的使用</h3>
<blockquote>
<p>可以根据指定的HTML模板文件生成一个HTML页面,并且在HTML页面中自动引入打包好的js文件</p>
</blockquote>
<pre><code class="lang-javascript">// 1. 安装html-webpack-plugin
npm i html-webpack-plugin --save-dev

// 2. 在webpack.config.js中的plugins节点中配置插件
// 2.1 导入html-webpack-plugin
const htmlWebpackPlugin = require(&#39;html-webpack-plugin&#39;)
// 2.2 配置插件
plugins:[
    new htmlWebpackPlugin({
        template:path.join(__dirname,&#39;./src/index.html&#39;),// 需要生成的HTML的模板文件
        filename:&#39;index.html&#39; // 生成的HTML文件的名称
    })
]
</code></pre>
<h3 id="-css-loader-css-"><code>css-loader</code>处理CSS文件</h3>
<blockquote>
<p>解析处理文件后缀名为.css的文件</p>
</blockquote>
<pre><code class="lang-javascript">// 1. 安装style-loader css-loader
npm i style-loader css-loader --save-dev

// 2. 在webpack.config.js中的moudle节点中配置解析规则
module:{
    rules:[
        {
            test:/\.css$/,
            use:[&#39;style-loader&#39;,&#39;css-loader&#39;]
        }
    ]
}
</code></pre>
<h3 id="-less-loader-less-"><code>less-loader</code>处理less文件</h3>
<blockquote>
<p>解析处理文件后缀名为.less的文件</p>
</blockquote>
<pre><code class="lang-javascript">// 1. 安装less less-loader
npm i less less-loader --save-dev

// 2. 在webpack.config.js中的moudle节点中配置解析规则
module:{
    rules:[
        {
            test:/\.less$/,
            use:[&#39;style-loader&#39;,&#39;css-loader&#39;,&#39;less-loader&#39;]
        }
    ]
}
</code></pre>
<h3 id="-scss-loader-scss-"><code>scss-loader</code>处理scss文件</h3>
<blockquote>
<p>解析处理文件后缀名为.scss的文件</p>
</blockquote>
<pre><code class="lang-javascript">// 1. 安装node-sass sass-loader
npm i node-sass sass-loader --save-dev

// 2. 在webpack.config.js中的moudle节点中配置解析规则
module:{
    rules:[
        {
            test:/\.scss$/,
            use:[&#39;style-loader&#39;,&#39;css-loader&#39;,&#39;sass-loader&#39;]
        }
    ]
}
</code></pre>
<h3 id="-url-loader-"><code>url-loader</code>处理图片等资源文件</h3>
<blockquote>
<p>解析处理项目中引入的图片、字体图标、音视频等资源文件</p>
</blockquote>
<pre><code class="lang-javascript">// 1. 安装file-loader ulr-loader
npm i file-loader ulr-loader --save-dev

// 2. 在webpack.config.js中的moudle节点中配置解析规则
module:{
    rules:[
        {
            test:/\.(png|jpg|gif)/,
            use:&#39;url-loader?limit=20000&amp;name=[hash:8]-[name].[ext]&#39;
            // 当需要打包的文件小于limit的值,会将图片转换成base64字符串在build.js中进行引用
            // 当需要打包的文件大于limit的值,会将图片打包到输出目录中
            //一般比较小的图片才需要被转成base64,所以该值不宜太大

            // name=[hash:8]-[name].[ext]表示将来打包出来的文件名称以8位hash值和原来的名称进行拼接,文件扩展名不变
        }
    ]
}
</code></pre>
<h3 id="-babel-"><code>babel</code>的使用</h3>
<blockquote>
<p>解析webpack默认不能处理的JS</p>
</blockquote>
<pre><code class="lang-JavaScript">// 1. 安装babel-core babel-loader babel-plugin-transform-runtime
npm i babel-core babel-loader babel-plugin-transform-runtime --save-dev

// 2. 安装babel-preset-env babel-preset-stage-0
npm i babel-preset-env babel-preset-stage-0 --save-dev

// 3. 在webpack.config.js中的moudle节点中配置解析规则
module:{
    rules:[
        {
            test:/\.js$/,
            use:&#39;babel-loader&#39;,
            exclude:/node_modules/ //排除掉node_modules文件夹,让babel-loader不去解析node_modules文件夹中的js文件
        }
    ]
}

// 4. 在项目根目录新建.babelrc文件,书写如下配置
{
    &quot;presets&quot;:[&quot;env&quot;,&quot;stage-0&quot;],
    &quot;plugins&quot;:[&quot;transform-runtime&quot;]
}
</code></pre>
<h2 id="webpack-vue">webpack中使用Vue</h2>
<pre><code class="lang-JavaScript">// 1. 安装vue vue-loader vue-template-compiler
npm i vue --save
npm i vue-loader vue-template-compiler --save-dev

// 2. webpack.config.js中配置解析规则
module: {
    rules: [
        {
            test:/\.vue$/,use:&#39;vue-loader&#39;
        }
    ]
}

// 3. 在index.html中加入一个需要Vue托管的区域
&lt;div id=&quot;app&quot;&gt;&lt;/div&gt;

// 4. 新建App.vue组件
&lt;template&gt;
    &lt;div&gt;vue组件&lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default {

}
&lt;/script&gt;
&lt;style&gt;
&lt;/style&gt;

// 5. main.js中导入vue的包,渲染App.vue组件
import Vue from &#39;vue&#39;
import App from &#39;./App.vue&#39;

new Vue({
    el:&#39;#app&#39;,
    render:c=&gt;c(App) //将App组件渲染到id为app的区域中
})
</code></pre>
<h2 id="webpack-vue-router">webpack 中集成vue-router</h2>
<pre><code class="lang-JavaScript">// 1. 安装vue-router
npm i vue-router --save

// 2. 在main.js中导入vue-router并实例化路由添加路由规则
import VueRouter from &#39;vue-router&#39;
Vue.use(VueRouter) // 保证在vue的组件中可以使用vue-router提供的组件 如&lt;router-view&gt; &lt;router-link&gt;

const router = new VueRouter({
    routes: [
        {
            path: &#39;/login&#39;, component: login
        }
    ]
})

// 3. 将实例化的router绑定到Vue
new Vue({
    el: &#39;#app&#39;,
    render: c =&gt; c(App),
    router // 将router实例绑定到Vue上 以保证vue实例中可以访问$route $router等属性
})

// 4. 在App.vue中添加路由占位router-view标签
&lt;router-link to = &quot;/login&quot;&gt;登录&lt;router-link&gt;
&lt;router-view&gt;&lt;/router-view&gt;
</code></pre>
<hr>
<h2 id="-save-save-dev">--save和--save-dev</h2>
<pre><code>// 项目开发期间需要安装的依赖
// --save-dev 会将安装的包名以及版本号记录到package.json文件中的devDependencies节点中
npm install webpack --save-dev 等价于 npm install webpack -D

// 项目上线后需要安装的依赖
// --save 会将安装的包名以及版本号记录到package.json文件中的dependencies节点中
npm i webpack --save 等价于 npm i webpack -S

npm i 会将所有在package.json文件中的devDependencies节点和dependencies节点内所有的依赖包全部安装一遍
npm i --save-dev 只会下载devDependencies中的所有依赖包
npm i --save 只会下载dependencies中的所有依赖包

// 为什么安装包的时候要区分 --save 和 --save-dev
// 1. 使项目的阅读更加友好，便于理解项目结构
// 2. 安装对应阶段的包时更加方便

npm i cnpm -g

cnpm
</code></pre><h2 id="vscode-">VSCode用户代码片段</h2>
<pre><code class="lang-json">&quot;Print to vue&quot;: {
        &quot;prefix&quot;: &quot;vuec&quot;,
        &quot;body&quot;: [
            &quot;&lt;template&gt;&quot;,
            &quot;    &lt;div&gt;&quot;,
            &quot;      御剑乘风来,除魔天地间!$1&quot;,
            &quot;    &lt;/div&gt;&quot;,
            &quot;&lt;/template&gt;&quot;,
            &quot;           &quot;,
            &quot;&lt;script&gt;&quot;,
            &quot;export default{&quot;,
            &quot;    $2         &quot;,
            &quot;}&quot;,
            &quot;&lt;/script&gt;&quot;,
            &quot;&lt;style scoped&gt;&quot;,
            &quot;$3            &quot;,
            &quot;&lt;/style&gt;&quot;
        ],
        &quot;description&quot;: &quot;create a vue template&quot;
    }
</code></pre>
<h2 id="yarn-">yarn的使用</h2>
<pre><code>// 1. 使用npm全局安装yarn
npm i yarn -g

// 2. 初始化命令
yarn init -y

// 3. 安装包
yarn add package-name // 会将安装的包记录到dependencies节点里面
yarn add package-name --dev // 会将安装的包记录到devDependencies节点里面

yarn global add package-name // 安装全局包

// 4. 删除包
yarn remove package-name

// 5. 执行命令
yarn run dev

yarn global bin 查看全局包安装的路径
</code></pre><h2 id="vue-cli-">vue-cli脚手架的使用</h2>
<pre><code>// 1. 安装vue-cli脚手架
npm i vue-cli -g

// 2. 初始化项目模板
vue init webpack 项目名称
eslint(语法规范化插件) 不要安装  当安装之后只能按照ESLint中规定的语法格式去书写代码
e2e(测试框架) 不要安装
unit test(单元测试框架) 不要安装

// 3. 进入项目安装所有依赖
npm i

// 4. 运行
npm run dev

config/index.js中 17/18行改端口号和自动打开浏览器
</code></pre><h2 id="-">将项目提交到码云</h2>
<pre><code>// 1. 在项目文件夹初始化git
git init

// 2. 将代码提交到暂存区
git add .

// 3. 提交代码
git commit -m &#39;描述信息&#39;

// 4. 关联远程分支
git remote add origin https://gitee.com/UniverseKing/tes.git

// 5. 推送到远程分支
git push -u origin master

// 6. 查看文件信息
git status

// 7. 查看log
git log --oenline

// 8. 切换版本记录
git reset --hard 版本号
</code></pre><h2 id="vue-loader-">vue-loader深度作用选择器</h2>
<blockquote>
<p>如果希望在父组件中去改变子组件中的样式,有时候通过普通子类选择器无法实现,主要是由于添加了<code>scoped</code>属性导致,<code>vue-loader</code>中提供了<a href="https://vue-loader.vuejs.org/zh-cn/features/scoped-css.html">深度作用选择器</a>可以实现</p>
<p>这种问题主要出现在使用第三方组件时,需要改第三方组件的样式时</p>
</blockquote>
<pre><code class="lang-CSS">/*假设.content是父组件中的类 img是子组件中的标签*/
/*css中使用&gt;&gt;&gt;*/
.content &gt;&gt;&gt; img {

}
/*scss或者less中使用/deep/*/
.content /deep/ img {

}
</code></pre>
<h2 id="promise">Promise</h2>
<blockquote>
<p><code>Promise</code> 是异步编程的一种解决方案.简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，<code>Promise</code> 是一个对象，可以从该对象获取异步操作的消息。</p>
</blockquote>
<pre><code>Promise有几种状态?
Promise有三种状态
promsie实例一被创建  默认就是pending状态(表示异步操作进行中)
如果异步操作成功 状态会从 pending 变成 fulfilled(表示异步操作成功)
如果异步操作失败 状态会从 pending 变成 rejected(表示异步操作失败)
</code></pre><h3 id="-">基本用法</h3>
<pre><code>// 1. 创建promise实例,在实例中执行异步操作(比如发送网络请求)
// 2. 异步操作成功时,调用reslove函数传递数据
// 3. 异步操作失败时,调用reject函数传递错误信息
const promise = new Promise(function(resolve, reject) {
    // 异步操作
    // ... 
    if (/* 异步操作成功 */){
        resolve(value);
    } else {
        reject(error);
    }
});

// 4. 使用promise实例then方法接收reslove或reject返回的数据
promise.then(function(value) {
    // 此处数据即为reslove回来的数据
      // success
}, function(error) {
    // 此处数据即为reject回来的数据
    // failure
});
</code></pre><h3 id="-">网络请求案例</h3>
<pre><code>// 1. 定义一个使用promise封装的请求函数,函数内部返回一个promise实例
function fetch(){
    // 函数内部返回一个promise实例
    return new Promise(function(reslove,reject){
        // 发送异步请求
        axios.get(&#39;http://www.lovegf.cn:8090/api/getlunbo&#39;).then(function(res){
            // 请求正常
            if(res.status == 1){
                reslove(res.data)
            }else{
                reject(res.error)
            }
        })
    })
}

// 2. 调用函数发送请求,通过Promise.prototype.then方法获取resolve或reject出来的数据
fetch().then(function(res){
    // res为reslove函数传出的数据
},function(err){
    // err为reject函数传出的错误
})
</code></pre><h3 id="-">解决回调地狱</h3>
<blockquote>
<p>假设有三个请求A、B、C,B请求需要依赖A请求的数据,C请求需要依赖B请求的数据.</p>
<p>传统回调函数式写法如下:</p>
</blockquote>
<pre><code>function dependices_fetch(){
    // A请求
    axios.get(&#39;A&#39;).then(function(res){
        if(res.status == 1){
            // B请求
            axios.get(&#39;B&#39;).then(function(res){
                if(res.status == 1){
                    // C请求
                    axios.get(&#39;C&#39;).then(function(res){
                        // 请求完毕,执行后续逻辑
                    })
                }
            })
        }
    })
}
</code></pre><blockquote>
<p>这种代码虽然能够满足业务,但是代码组织结构非常不便于阅读</p>
<p>通过Promise可以封装代码,使用链式方式解决这种多个异步依赖的回调</p>
<p>如下:</p>
</blockquote>
<pre><code>function fetch(url){
    return new Promise(function(reslove,reject){
        axios.get(url).then(function(res){
            if(res.status == 1){
                reslove(res.data)
            }else{
                reject(res.error)
            }
        })
    })
}

//then方法内部返回的promise实例reslove或reject出来的对象会在下一个then方法内部得到
fetch(&#39;A&#39;).then(function(res){
    // A 请求正常
    return fetch(&#39;B&#39;)    // 这里返回一个新的promise实例,在后面的then中可以得到该实例reslove或reject出来的对象
}).then(function(res){
    // B 请求正常
    return fetch(&#39;C&#39;)
}).then(function(res){
    // C 请求正常
    // 请求完毕
})
</code></pre><h3 id="-">多个异步请求结果组合问题</h3>
<blockquote>
<p>假设有A、B、C三个异步请求,需要三个请求的数据都回来之后,将数据整合后再渲染页面,这种需求可以使用<code>Promise.all()</code></p>
<p>Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。</p>
</blockquote>
<pre><code>function fetch(url){
        return new Promise(function(reslove,reject){
            axios.get(url).then(function(res){
                if(res.status == 1){
                    reslove(res.data)
                }else{
                    reject(res.error)
                }
            })
        })
}

const p1 = fetch(&#39;A&#39;)
const p2 = fetch(&#39;B&#39;)
const p3 = fetch(&#39;C&#39;)
const p = Promise.all([p1, p2, p3]);
p.then(function(res){
    // res是一个数组,存放着p1,p2,p3的返回值
})
</code></pre><h2 id="async-await-">async 和 await 的使用</h2>
<blockquote>
<p>async 和 await 是ES7中新提供的两个操作异步函数的关键字,本质是对Promise进一步的封装</p>
<p>await 只能用在 async 定义的函数内部,await 可以等待异步操作,并同步的得到异步操作的返回值</p>
</blockquote>
<pre><code class="lang-JavaScript">// 1. 基于Promise的异步操作函数
const fs = require(&#39;fs&#39;)
function getFileByPath(fpath) {
    return new Promise(function (resolve, reject) {
        fs.readFile(fpath, &#39;utf-8&#39;, (err, dataStr) =&gt; {

            if (err) return reject(err)
            resolve(dataStr)

        })
    })
}

// 2. 基于 await 的异步依赖问题(异步操作3依赖异步操作2,异步操作2依赖异步操作1)
// 2.1 先使用async定义异步操作
const start = async function(){
// 2.2 在async内部使用await 同步操作    
    const n1 = await getFileByPath(&#39;./1.txt&#39;)
    const n2 = await getFileByPath(&#39;./2.txt&#39;)
    const n3 = await getFileByPath(&#39;./3.txt&#39;)

    // n3会等待n2 n2 会等待n1
}
</code></pre>
<h2 id="axios-">axios 使用</h2>
<pre><code class="lang-JavaScript">1. 安装axios
npm i axios qs --save

2. 在main.js中导入axios,并将axios 挂载到Vue的原型中
improt axios from &#39;axios&#39;
Vue.prototype.$axios = axios 

3. get请求

this.$axios.get(&#39;url&#39;).then(function(res){
    // 注意:
    // 1. 响应的数据在res.data中
    // 2. 在回调函数内部的this 不是Vue实例(通常会将这个回调函数改成箭头函数)
})

4. post 请求
// 注意:当后台要求传递的参数数据格式是 application/x-www-form-urlencode
// 需要对参数进行序列化
// 使用qs模块序列化qs.stringify({name:&#39;zs&#39;,age:18})
// 如果后台要求的参数格式 是json格式 appliction/json 不需要序列化
this.$axios.post(&#39;url&#39;,qs.stringify({name:&#39;zs&#39;,age:18})).then(res=&gt;{

})

5. 全局配置
// 5.1 设置全局的请求根域名
axios.defaults.baseURL = &#39;http://vue.studyit.io/&#39;;
// 5.2 通过设置请求拦截器 配置post参数序列化
axios.interceptors.request.use(function (config) {
    // 统一处理post请求的参数 为application/x-www-form-urlencode
    if (config.method == &#39;post&#39;) {
        config.data = qs.stringify(config.data)
    }
    return config;
});
</code></pre>
<h2 id="vue-">Vue插件开发</h2>
<pre><code class="lang-JavaScript">1. 单独新建一个JS文件,在这个文件中导入需要制作成Vue插件的模块
import axios from &#39;axios&#39;

2. 在该模块身上定义一个install函数,可以接受两个参数,第一个用于接收Vue构造函数
第二个用于配置插件的一些选项
axios.install = function(Vue,config){
    // 1. 注册全局组件
    // 2. 将属性挂载到原型中
}
3. 导出制作好的Vue插件模块
export default axios

4. 使用插件
// 能够使用Vue.use的前提就是传入的对象一定要有install方法
// 调用Vue.use()的时候 会自动去调用 传入对象的 install方法
import axios from &#39;插件路径&#39;
Vue.use(axios) // 会自动调用axios的install方法
</code></pre>
<h2 id="-webpack-">去除webpack打包后的严格模式</h2>
<blockquote>
<p>在使用babel-loader的时候,会将所有转换的代码加上严格模式</p>
</blockquote>
<pre><code class="lang-JavaScript">// 方法一: .babelrc文件中忽略不需要使用严格模式转换的文件路径
 &quot;ignore&quot;: [
    &quot;./src/js/mui/mui.min.js&quot;
  ]

// 方法二: babel-loader配置中排除掉不需要严格模式转换的文件
{ 
    test: /\.js$/,
    use: &#39;babel-loader&#39;,
    exclude: /mui\.min\.js/
}

// 方法三: babel-plugin-transform-remove-strict-mode 移除整个项目打包编译时的严格模式
// https://www.npmjs.com/package/babel-plugin-transform-remove-strict-mode
1. 安装babel-plugin-transform-remove-strict-mode
npm install babel-plugin-transform-remove-strict-mode --save-dev

2. babelrc中添加
{
  &quot;plugins&quot;: [&quot;transform-remove-strict-mode&quot;]
}
</code></pre>
<h2 id="-">路由模式</h2>
<blockquote>
<p>通过给<code>vue-router</code>配置<code>mode</code>属性,可以指定URL路径的显示方式</p>
<p><code>mode</code>属性默认值是<code>hash</code>,此时URL中有#,如:<code>http://localhost:8888/#/home</code>,实现方式即<code>window.location.hash</code></p>
<p>如果<code>mode</code>设置成<code>history</code>,此时URL路径没有#,如:<code>http://localhost:8888/home</code>,实现方式为<code>window.history</code>,这种方式同一个URL不能再其他页面打开,需要服务端配置</p>
</blockquote>
<pre><code class="lang-JavaScript">new VueRouter({
    mode:&#39;hash&#39;,
    routes:[

    ]
})
</code></pre>
<h2 id="vuex-">Vuex的使用</h2>
<blockquote>
<p>Vuex是一个状态管理库,或者说是专为Vue应用程序开发设计的状态管理模式,它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。</p>
<p>注:所谓状态,可以理解成项目中各个组件需要用到的数据。</p>
<p>Demo:<a href="https://gitee.com/UniverseKing/vuex-study">https://gitee.com/UniverseKing/vuex-study</a></p>
</blockquote>
<h3 id="-">初始化公共状态</h3>
<pre><code class="lang-JavaScript">1. 安装vuex
npm i vuex --save

2. 入口文件中实例化Store
import Vuex from &#39;vuex&#39;
Vue.use(Vuex)
var store = new Vuex.Store({
  // 1. 用于定义状态(公共数据),类似于Vue实例中的data方法
  state:{
      msg:&#39;初始化的数据&#39;
  },
  // 2. 用于修改状态,类似于Vue实例中methods
  mutations:{
      change(state,arg){
          // 更改状态
          state.msg = arg
      }
  },
  // 3. 用于获取数据(获取数据之前可以进行一些操作),类似于Vue实例中的过滤器和计算属性
  // getters 主要会用在跨组件传值
  // getters 中定义的方法内部依赖的数据发生变化会自动重新调用函数计算返回值
  getters:{
      fixmsg(state){
          return `${state.msg}----处理后的数据`
      }
  },
  // 4. actions和mutations都是定义对数据进行操作的方法,mutations中都是同步方法,mutations中定义异步方法
  // Action 提交的是 mutation，而不是直接变更状态。所以需要修改状态还是需要使用mutations中定义的方法

  // 从网络请求回来的数据需要保存到store
  // 发送网络请求的方法可以定义到actions中
  // actions主要用于处理异步方法
  actions:{
      asyncchange(context,arg){
          // 异步方法
          setTimeout(() =&gt; {
              context.commit(&#39;change&#39;,arg)
          }, 3000)
      }
  }
})

3. 注入到Vue实例中
new Vue({
    el:&#39;#app&#39;,
    store
})
</code></pre>
<h3 id="-">使用状态</h3>
<pre><code class="lang-JavaScript">1. 使用state中的数据
JavaScript: this.$store.state.msg
HTML: $store.state.msg

2. 使用getters中的数据
JavaScript: this.$store.getters.fixmsg
HTML: $store.getters.msg
</code></pre>
<h3 id="-">变更状态(修改数据)</h3>
<blockquote>
<p>状态的变更必须使用mutations中提供的方法进行修改</p>
</blockquote>
<pre><code class="lang-JavaScript">1. 提交mutations中的变更方法
this.$store.commit(&#39;change&#39;,&#39;我是被修改的数据&#39;)

2. 异步提交actions中的变更方法
this.$store.dispatch(&#39;asyncchange&#39;,&#39;我是被异步修改的数据&#39;)
</code></pre>
<h3 id="-">使用辅助函数</h3>
<blockquote>
<p>辅助函数可以直接将<code>state</code>,<code>getters</code>中的数据映射到Vue组件中的计算属性上,可以将<code>mutations</code>,<code>actions</code>中的方法映射到组件中的<code>methods</code>中</p>
</blockquote>
<pre><code class="lang-JavaScript">import { mapState } from &#39;vuex&#39;
import { mapGetters } from &#39;vuex&#39; 
import { mapMutations } from &#39;vuex&#39;
import { mapActions } from &#39;vuex&#39;

new Vue({
    computed:mapGetters([
        &#39;count&#39;
    ])
})
// ==&gt;等价于
new Vue({
    computed:{
        count(){
            return this.$store.state[&#39;count&#39;]
        }
})
</code></pre>
<h2 id="vue-cli-">vue-cli配置代理解决开发阶段跨域问题</h2>
<pre><code class="lang-JavaScript">// webpack.config.js配置文件导出对象中加入
 devServer:{
    // 代理跨域
    proxy: {
      &#39;/api&#39;: {
        target: &#39;http://vue.studyit.io/api&#39;, // 需要被代理的api根域名
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          &#39;^/api&#39;: &#39;&#39; // 重写(target中只有根域名时不需要配置此选项)
        }
      }
    }
  }
---------------------------
// vue-cli中
config/index.js中
proxyTable: {
    &#39;/api&#39;: {
        target: &#39;http://vue.studyit.io/api&#39;,
        changeOrigin: true,
        pathRewrite: {
          &#39;^/api&#39;: &#39;&#39;
        }
    }
},
</code></pre>
<h2 id="webpack-">webpack打包优化</h2>
<blockquote>
<p>目前项目中所有资源都会被打包到最终生成的一个build.js中,而build.js又被引用到index.html中,当打开index.html时,首先需要从互联网下载build.js,只有build.js全部下载完毕,浏览器的解析引擎才会开始执行该js代码进行代码解析,当解析引擎将代码解析完毕后再交给渲染引擎开始进行渲染,所有工作几乎都是同步执行,当build.js体积非常大时,往往应用的首页加载速度比较慢,而且会看到白屏效果.可以从以下三方面进行优化首页加载速度过慢问题:</p>
</blockquote>
<ol>
<li><p>下载文件速度慢</p>
</li>
<li><p>解析JS比较慢</p>
</li>
<li><p>渲染比较慢</p>
</li>
</ol>
<h3 id="-ssr-">服务端渲染(SSR)</h3>
<blockquote>
<p>SEO优化</p>
<p>在服务端先将JS进行解析,解析完成之后生成HTML片段,再将HTML返回给前端,前端直接执行渲染界面</p>
</blockquote>
<h3 id="-css">抽取CSS</h3>
<blockquote>
<p>将项目中所有CSS抽取到单独的文件中进行加载,减小了build.js的体积,只要build.js下载完成即可开始解析代码</p>
<p><a href="https://github.com/webpack-contrib/extract-text-webpack-plugin">https://github.com/webpack-contrib/extract-text-webpack-plugin</a></p>
</blockquote>
<pre><code class="lang-JavaScript">1. 安装插件

npm install extract-text-webpack-plugin --save-dev

2. webpack.config.js中引入插件

var ExtractTextPlugin = require(&#39;extract-text-webpack-plugin&#39;);

3. 修改css-loader配置
{
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        fallback: &quot;style-loader&quot;,
        use: &quot;css-loader&quot;
    })
},
{
    test: /\.less$/,
    use: ExtractTextPlugin.extract({
        fallback: &#39;style-loader&#39;,
        use: [&#39;css-loader&#39;, &#39;sass-loader&#39;]
    })
}, // 处理 less 文件的 loader
{
    test: /\.scss$/,
    use: ExtractTextPlugin.extract({
        fallback: &#39;style-loader&#39;,
        use: [&#39;css-loader&#39;, &#39;sass-loader&#39;]
    })
}

4. plugin配置中使用插件
new ExtractTextPlugin(&#39;app.css&#39;)
</code></pre>
<h3 id="-">分离第三方包</h3>
<blockquote>
<p>将项目中引用的第三方JS代码抽取到一个单独的文件,也可以减少build.js的体积,还是只需要build.js下载完毕浏览器解析引擎即可开始进行解析,然后浏览器同时再去下载其他JS和CSS</p>
<p>一般将发布阶段所需要依赖的包全部进行分离,即<code>package.json</code>中<code>dependencies</code>中的所有包进行分离</p>
</blockquote>
<pre><code class="lang-JavaScript"> 1. 引入webpack和路径处理模块
var webpack = require(&#39;webpack&#39;);
var path = require(&#39;path&#39;);

2. 修改入口文件
entry: {
    app: path.resolve(__dirname, &#39;src/main.js&#39;),
    // 需要分离的第三方包名写在数组中
    vendors: [&#39;vue&#39;, &#39;vue-resource&#39;, &#39;vue-router&#39;, &#39;vuex&#39;, &#39;mint-ui&#39;, &#39;moment&#39;, &#39;vue-preview&#39;]
},

3. plugin中配置插件
// 分离第三方包插件
new webpack.optimize.CommonsChunkPlugin({
    name: &#39;vendors&#39;,
    filename: &#39;vendors.js&#39; // 分离出来的js文件的名称
})
</code></pre>
<h3 id="-">组件按需加载</h3>
<blockquote>
<p>vue-router提供的路由懒加载可以按需加载组件。</p>
<p>特点: 当没有访问到某个页面路由时,不去加载对应的组件代码,节约数据请求量,加快首页DOM渲染速度</p>
</blockquote>
<pre><code>将import home from &#39;./components/Home.vue&#39; 这种导入方式换成
const home = () =&gt; import(&#39;../components/Home.vue&#39;);
</code></pre><h2 id="-">路由导航钩子函数</h2>
<blockquote>
<p>在跳转路由时,进行拦截,一般用于权限验证或登录等操作</p>
<p><a href="https://router.vuejs.org/zh-cn/advanced/navigation-guards.html">https://router.vuejs.org/zh-cn/advanced/navigation-guards.html</a></p>
</blockquote>
<h3 id="-">路由独享守卫</h3>
<pre><code class="lang-JavaScript">const router = new VueRouter({
  routes: [
    {
      path: &#39;/home&#39;,
      component: HomeContainer,
      // 进入路由之前进行拦截
      beforeEnter: (to, from, next) =&gt; {
        // from 从哪个路由来
        // to 到哪个路由去
        // 释放守卫 进入下一个环节
      }
    }
  ]
})
</code></pre>
<h3 id="-">全局守卫</h3>
<pre><code class="lang-JavaScript">router.beforeEach((to, from, next) =&gt; {

})
</code></pre>
<h2 id="cmder-">Cmder使用</h2>
<blockquote>
<p>window系统下增强型命令行工具,免安装,解压即用</p>
</blockquote>
<pre><code class="lang-JavaScript">// 1. 将cmder.exe加入环境变量
1. window + R 输入 sysdm.cpl
2. 选中 高级 - 环境变量 - 系统变量 - Path
3. 将cmder.exe所在目录添加到Path中

// 2. 天假右键菜单
在cmder.exe所在目录打开命令行窗口 输入 Cmder.exe /REGISTER ALL
</code></pre>
<h2 id="hbuilder-">HBuilder打包</h2>
<blockquote>
<p>HBuilder打包 是将前端开发的HTML/CSS/JS文件进行打包,打包成可以直接安装在手机上面的App,不借助浏览器就可以直接运行</p>
</blockquote>
<pre><code class="lang-JavaScript">1. 使用webpack将项目进行打包,打包好的文件会在dist目录
webpack -p

2. 打开Hbuilder,新建移动App项目,然后删掉css/js/imgs文件夹和index.html文件

3. 将使用webpack打包的dist目录里面的文件全部拷贝到新建的移动项目目录中

4. 选中HTML文件,点击HBuilder导航上面的`发行`-`打原生安装包`,直接下一步,选安卓公共证书-`打包`

5. 在项目的`unpackage\release`中可以得到打包完毕的apk文件
</code></pre>
<h2 id="cordova-">cordova打包</h2>
<blockquote>
<p>直接在本地进行打包</p>
<p>需要电脑配置Java环境和Android环境 <code>gradle</code></p>
</blockquote>
<pre><code class="lang-JavaScript">// 1. 安装全局cordova
npm i cordova -g

// 2. 创建cordova项目
cordova create cordova_project

// 3. 添加需要打包的平台
cordova platform add android

// 4. 运行或者打包
cordova run android
cordova build android
</code></pre>
<h2 id="vue-cli-">vue-cli打包完成后</h2>
<ol>
<li><p>错误信息:<code>postcss-svgo: Error in parsing SVG: Unquoted attribute value</code></p>
<ul>
<li>需要修改mui.css中的 <strong>图片引用</strong> 单引号全部改成双引号</li>
</ul>
</li>
<li><p>提示必须使用服务器的方式打开,即使用localhost方式打开</p>
<pre><code> // 1. 安装http-server
 npm i http-server -g
 // 2. 使用hs -o命令打开index.html文件
 hs -o
</code></pre></li>
<li><p>如果打包完成后希望直接用file协议打开,需要修改config/index.js 中的build下的<code>assetsPublicPath: &#39;/&#39;</code>换成<code>assetsPublicPath: &#39;./&#39;</code></p>
</li>
</ol>
<h2 id="parcel-">Parcel使用</h2>
<pre><code class="lang-JavaScript">
npm i parcel-bundler -g

parcel index.html
</code></pre>
<hr>
<blockquote>
<p>项目地址:<a href="https://gitee.com/UniverseKing/vue_cms">https://gitee.com/UniverseKing/vue_cms</a></p>
<p><a href="https://github.com/UniverseKing/awesome-github-vue#%E5%BA%94%E7%94%A8%E5%AE%9E%E4%BE%8B">Vue组件</a></p>
</blockquote>
<h2 id="mvc-mvvm-">MVC 和 MVVM 区别</h2>
<blockquote>
<p>MVC从后台业务逻辑对项目进行分层开发 数据流通是单向的,所有的数据流通都需要C进行控制</p>
<p>MVVM是前端框架的一种设计模式,核心是双向数据绑定,M和V可以直接进行通信,VM只负责数据的绑定</p>
</blockquote>
<h2 id="-">你平时开发项目,有没有遇到比较难的问题,是怎么解决的?</h2>
<ul>
<li><p>vue-loader 深度作用选择器(父组件中不能给v-html渲染出来的标签添加样式)</p>
</li>
<li><p>babel-loader在编译代码时,会给所有的代码加上严格模式,不能使用call,callee,arguments..</p>
</li>
</ul>
<h2 id="-">项目接口:</h2>
<blockquote>
<p><a href="http://www.escook.cn:3000/">http://www.escook.cn:3000/</a></p>
<p><a href="http://www.lovegf.cn:8899/">http://www.lovegf.cn:8899/</a></p>
</blockquote>
<h2 id="-">真机调试</h2>
<pre><code>1. 手机开一个WiFi热点
2. 使用电脑连接手机的WiFi热点
3. 在电脑上打开CMD命令行 输入ipconfig命令 查看的IP地址是 无线局域网下面的ipv4地址
4. 在项目中使用--host IP地址 重启项目
5. 在手机中访问项目的IP地址
</code></pre>
          	</article>
        </div>
		</div>
  </body>
</html>
<script type="text/javascript" src="toc/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="toc/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="toc/js/ztree_toc.js"></script>
<script type="text/javascript" src="toc_conf.js"></script>

<SCRIPT type="text/javascript" >
<!--
$(document).ready(function(){
    var css_conf = eval(markdown_panel_style);
    $('#readme').css(css_conf)
    
    var conf = eval(jquery_ztree_toc_opts);
		$('#tree').ztree_toc(conf);
});
//-->
</SCRIPT>